<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>股票财务详情 - 股票财务分析报告系统</title>
    <!-- 引入Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <!-- 引入ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f8f9fa;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1rem 0;
            margin-bottom: 2rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .header h1 {
            margin: 0;
            font-size: 1.8rem;
            font-weight: 600;
        }
        .back-link {
            color: white;
            text-decoration: none;
            font-size: 1rem;
            transition: opacity 0.3s;
        }
        .back-link:hover {
            color: white;
            opacity: 0.8;
            text-decoration: none;
        }
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            margin-bottom: 1.5rem;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        .card-header {
            background-color: #667eea;
            color: white;
            border-radius: 10px 10px 0 0 !important;
            font-weight: 500;
            font-size: 1.1rem;
        }
        .card-body {
            padding: 1.5rem;
        }
        .badge {
            font-size: 0.8rem;
            padding: 0.4rem 0.6rem;
        }
        .badge-success {
            background-color: #38b2ac;
        }
        .badge-warning {
            background-color: #ed8936;
        }
        .badge-danger {
            background-color: #f56565;
        }
        .badge-info {
            background-color: #4299e1;
        }
        .data-label {
            color: #4a5568;
            font-size: 0.9rem;
            margin-bottom: 0.2rem;
        }
        .data-value {
            font-size: 1.5rem;
            font-weight: bold;
            color: #667eea;
        }
        .data-value.small {
            font-size: 1.2rem;
        }
        .data-row {
            margin-bottom: 1.5rem;
        }
        .chart-container {
            height: 400px;
            margin-top: 1rem;
        }
        .chart-container.small {
            height: 300px;
        }
        .table-hover tbody tr:hover {
            background-color: #f8f9fa;
        }
        .table th {
            background-color: #f8f9fa;
            font-weight: 600;
            color: #4a5568;
        }
        .stats-box {
            background-color: #f7fafc;
            border-radius: 8px;
            padding: 1rem;
            text-align: center;
            border: 1px solid #e2e8f0;
        }
        .stats-box .title {
            font-size: 0.9rem;
            color: #718096;
            margin-bottom: 0.5rem;
        }
        .stats-box .value {
            font-size: 1.8rem;
            font-weight: bold;
            color: #667eea;
        }
        .highlight {
            background-color: #ebf8ff;
            border-left: 4px solid #3182ce;
            padding: 1rem;
            margin-bottom: 1rem;
            border-radius: 0 8px 8px 0;
        }
        .quarter-chip {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            margin: 0.25rem;
            border-radius: 4px;
            background-color: #edf2f7;
            font-size: 0.8rem;
            font-weight: 500;
        }
        .quarter-chip.current {
            background-color: #667eea;
            color: white;
        }
        .error-message {
            color: #f56565;
            text-align: center;
            padding: 2rem;
            font-size: 1.1rem;
        }
        .btn-primary {
            background-color: #667eea;
            border-color: #667eea;
        }
        .btn-primary:hover {
            background-color: #5a67d8;
            border-color: #5a67d8;
        }
        .btn-info {
            background-color: #38b2ac;
            border-color: #38b2ac;
        }
        .btn-info:hover {
            background-color: #319795;
            border-color: #319795;
        }
        .progress {
            height: 8px;
            border-radius: 4px;
            background-color: #e2e8f0;
        }
        .progress-bar {
            background-color: #667eea;
        }
        .stock-info {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        .stock-info h2 {
            margin: 0;
            margin-right: 1rem;
            font-size: 1.8rem;
            font-weight: 600;
        }
        .stock-info .code {
            font-size: 1.2rem;
            color: #718096;
            font-weight: 500;
        }
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
    </style>
</head>
<body>
    <!-- 加载遮罩层 -->
    <div id="loadingOverlay" class="loading-overlay" style="display: none;">
        <div class="text-center">
            <div class="spinner-border text-primary" style="width: 4rem; height: 4rem;" role="status">
                <span class="sr-only">加载中...</span>
            </div>
            <p class="mt-3">数据加载中，请稍候...</p>
        </div>
    </div>

    <!-- 头部 -->
    <header class="header">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <a href="/stockpereport/index" class="back-link">
                        <i class="fas fa-arrow-left mr-2"></i>返回列表
                    </a>
                    <h1 class="mt-1">股票财务分析详情</h1>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <div class="container">
        <!-- 错误消息区域 -->
        <div id="errorArea" style="display: none;">
            <div class="error-message">
                <i class="fas fa-exclamation-circle mr-2"></i>
                <span id="errorMessage">数据加载失败，请稍后重试</span>
            </div>
        </div>

        <!-- 股票基本信息 -->
        <div class="card">
            <div class="card-header">
                <i class="fas fa-info-circle mr-2"></i>股票基本信息
            </div>
            <div class="card-body">
                <div class="stock-info">
                    <h2 id="securityName">--</h2>
                    <span class="code" id="securityCode">--</span>
                    <span class="ml-3" id="stockBadge"></span>
                </div>
                <div class="highlight">
                    <p class="mb-0"><i class="fas fa-calendar-alt mr-2"></i>最新报告期: <span id="reportDate">--</span></p>
                    <p class="mb-0"><i class="fas fa-sync-alt mr-2"></i>更新时间: <span id="updateTime">--</span></p>
                </div>
            </div>
        </div>

        <!-- 关键财务指标 -->
        <div class="card">
            <div class="card-header">
                <i class="fas fa-chart-line mr-2"></i>关键财务指标
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="stats-box">
                            <div class="title">市盈率(TTM)</div>
                            <div class="value" id="peTTM">--</div>
                            <div class="mt-2">
                                <div class="progress">
                                    <div id="peProgress" class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <small class="text-muted" id="peHint"></small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stats-box">
                            <div class="title">市净率</div>
                            <div class="value" id="pbRatio">--</div>
                            <div class="mt-2">
                                <div class="progress">
                                    <div id="pbProgress" class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <small class="text-muted" id="pbHint"></small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stats-box">
                            <div class="title">净资产收益率(ROE)</div>
                            <div class="value" id="roe">--</div>
                            <div class="mt-2">
                                <div class="progress">
                                    <div id="roeProgress" class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <small class="text-muted" id="roeHint"></small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stats-box">
                            <div class="title">净资产</div>
                            <div class="value small" id="netAssets">--</div>
                            <div class="mt-2">
                                <div class="progress">
                                    <div id="assetProgress" class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <small class="text-muted" id="assetHint"></small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 财务数据图表 -->
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-chart-area mr-2"></i>近20季度ROE趋势
                    </div>
                    <div class="card-body">
                        <div id="roeTrendChart" class="chart-container"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-chart-pie mr-2"></i>资产负债结构
                    </div>
                    <div class="card-body">
                        <div id="assetLiabilityChart" class="chart-container"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 详细财务数据 -->
        <div class="card">
            <div class="card-header">
                <i class="fas fa-table mr-2"></i>详细财务数据
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h5 class="mb-3">资产负债情况</h5>
                        <div class="data-row">
                            <div class="data-label">总资产</div>
                            <div class="data-value" id="totalAssets">--</div>
                        </div>
                        <div class="data-row">
                            <div class="data-label">总负债</div>
                            <div class="data-value" id="totalLiabilities">--</div>
                        </div>
                        <div class="data-row">
                            <div class="data-label">资产负债率</div>
                            <div class="data-value" id="debtRatio">--</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h5 class="mb-3">财务费用情况</h5>
                        <div class="data-row">
                            <div class="data-label">利息支出</div>
                            <div class="data-value" id="interestExpense">--</div>
                        </div>
                        <div class="data-row">
                            <div class="data-label">财务费用-利息支出</div>
                            <div class="data-value" id="interestFee">--</div>
                        </div>
                        <div class="data-row">
                            <div class="data-label">财务费用</div>
                            <div class="data-value" id="financeExpense">--</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 季度数据表格 -->
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-md-6">
                        <i class="fas fa-calendar-alt mr-2"></i>近20个季度财务数据
                    </div>
                    <div class="col-md-6 text-right">
                        <button id="refreshQuarterlyBtn" class="btn btn-info btn-sm">
                            <i class="fas fa-sync-alt mr-1"></i>刷新季度数据
                        </button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div id="quarterChips" class="mb-3">
                    <!-- 季度标签将通过JavaScript动态加载 -->
                </div>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>报告期</th>
                                <th>交易日期</th>
                                <th>市盈率(TTM)</th>
                                <th>市净率</th>
                                <th>ROE(%)</th>
                                <th>净资产</th>
                                <th>更新时间</th>
                            </tr>
                        </thead>
                        <tbody id="quarterlyDataTable">
                            <tr>
                                <td colspan="8" class="text-center text-muted">加载中...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="text-center mt-4 mb-4">
            <button id="backToListBtn" class="btn btn-primary">
                <i class="fas fa-arrow-left mr-2"></i>返回列表
            </button>
            <button id="processQuarterlyBtn" class="btn btn-info ml-3">
                <i class="fas fa-cogs mr-2"></i>重新处理季度数据
            </button>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="mt-5 py-4 bg-light">
        <div class="container text-center text-muted">
            <p>© 2024 股票财务分析报告系统 - 数据来源于东方财富网</p>
            <p class="small">数据仅供参考，投资有风险</p>
        </div>
    </footer>

    <!-- 消息提示框 -->
    <div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: fixed; top: 20px; right: 20px; min-width: 300px; z-index: 1050;">
        <div class="toast-header">
            <strong class="mr-auto" id="toastTitle">提示</strong>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="toast-body" id="toastMessage"></div>
    </div>

    <!-- 引入jQuery和Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

    <script>
        $(document).ready(function() {
            // 从URL获取股票代码
            let urlParams = new URLSearchParams(window.location.search);
            let securityCode = urlParams.get('securityCode');
            
            // 如果URL中没有股票代码，尝试从路径中获取
            if (!securityCode) {
                let pathParts = window.location.pathname.split('/');
                securityCode = pathParts[pathParts.length - 1];
            }
            
            if (securityCode) {
                loadStockDetail(securityCode);
                loadQuarterlyData(securityCode);
            } else {
                showError('无法获取股票代码');
            }
            
            // 返回列表按钮点击事件
            $('#backToListBtn').click(function() {
                window.location.href = '/stockpereport/index';
            });
            
            // 刷新季度数据按钮点击事件
            $('#refreshQuarterlyBtn').click(function() {
                if (securityCode) {
                    loadQuarterlyData(securityCode);
                }
            });
            
            // 重新处理季度数据按钮点击事件
            $('#processQuarterlyBtn').click(function() {
                if (securityCode) {
                    let securityName = $('#securityName').text();
                    processQuarterlyData(securityCode, securityName);
                }
            });
        });
        
        // 加载股票详情
        function loadStockDetail(securityCode) {
            showLoading();
            $.ajax({
                url: `/stockpereport/api/reports/${securityCode}`,
                type: 'GET',
                success: function(data) {
                    hideLoading();
                    if (data.code === 200 && data.data) {
                        renderStockDetail(data.data);
                    } else {
                        showError('股票详情数据加载失败');
                    }
                },
                error: function() {
                    hideLoading();
                    showError('网络请求失败，请稍后重试');
                }
            });
        }
        
        // 加载季度数据
        function loadQuarterlyData(securityCode) {
            $('#quarterlyDataTable').html('<tr><td colspan="8" class="text-center text-muted">加载中...</td></tr>');
            
            $.ajax({
                url: `/stockpereport/api/reports/${securityCode}/quarters`,
                type: 'GET',
                success: function(data) {
                    if (data.code === 200 && data.data) {
                        renderQuarterlyData(data.data);
                        renderRoeTrendChart(data.data);
                    } else {
                        $('#quarterlyDataTable').html('<tr><td colspan="8" class="text-center text-muted">暂无季度数据</td></tr>');
                    }
                },
                error: function() {
                    $('#quarterlyDataTable').html('<tr><td colspan="8" class="text-center text-muted">数据加载失败</td></tr>');
                }
            });
        }
        
        // 渲染股票详情
        function renderStockDetail(report) {
            $('#securityName').text(report.securityName || '--');
            $('#securityCode').text(report.securityCode || '--');
            $('#reportDate').text(formatDate(report.reportDate));
            $('#updateTime').text(formatDateTime(report.updateTime));
            
            // 设置股票标签
            let peValue = report.peTTM || 0;
            let roeValue = report.roe || 0;
            
            if (roeValue > 15) {
                $('#stockBadge').html('<span class="badge badge-success">高ROE</span>');
            } else if (peValue < 15 && roeValue > 8) {
                $('#stockBadge').html('<span class="badge badge-info">价值投资</span>');
            } else if (peValue > 50) {
                $('#stockBadge').html('<span class="badge badge-warning">高估值</span>');
            }
            
            // 设置关键财务指标
            $('#peTTM').text(formatNumber(report.peTTM) || '--');
            $('#pbRatio').text(formatNumber(report.pbRatio) || '--');
            $('#roe').text(formatNumber(report.roe) || '--%');
            $('#netAssets').text(formatAmount(report.netAssets) || '--');
            
            // 设置进度条和提示
            setProgressValue('peProgress', getPEProgress(peValue), getPEHint(peValue));
            setProgressValue('pbProgress', getPBProgress(report.pbRatio || 0), getPBHint(report.pbRatio || 0));
            setProgressValue('roeProgress', getROEProgress(roeValue), getROEHint(roeValue));
            setProgressValue('assetProgress', 100, '总资产规模');
            
            // 设置详细财务数据
            $('#totalAssets').text(formatAmount(report.totalAssets) || '--');
            $('#totalLiabilities').text(formatAmount(report.totalLiabilities) || '--');
            $('#debtRatio').text(calculateDebtRatio(report.totalAssets, report.totalLiabilities) || '--%');
            $('#interestExpense').text(formatAmount(report.interestExpense) || '--');
            $('#interestFee').text(formatAmount(report.interestFee) || '--');
            $('#financeExpense').text(formatAmount(report.financeExpense) || '--');
            
            // 渲染资产负债结构图
            renderAssetLiabilityChart(report.totalAssets, report.totalLiabilities);
        }
        
        // 渲染季度数据
        function renderQuarterlyData(reports) {
            let tbody = $('#quarterlyDataTable');
            tbody.empty();
            let chipsContainer = $('#quarterChips');
            chipsContainer.empty();
            
            if (reports.length === 0) {
                tbody.append('<tr><td colspan="8" class="text-center text-muted">暂无季度数据</td></tr>');
                return;
            }
            
            // 按报告期降序排序
            reports.sort((a, b) => new Date(b.reportDate) - new Date(a.reportDate));
            
            // 添加季度标签
            reports.forEach((report, index) => {
                let isCurrent = index === 0;
                let quarterDate = formatDate(report.reportDate);
                chipsContainer.append(`
                    <span class="quarter-chip ${isCurrent ? 'current' : ''}" data-date="${quarterDate}">
                        ${quarterDate}
                    </span>
                `);
                
                tbody.append(`
                    <tr>
                        <td>${index + 1}</td>
                        <td>${quarterDate}</td>
                        <td>${formatDate(report.tradeDate)}</td>
                        <td class="${getPEClass(report.peTTM)}">${formatNumber(report.peTTM)}</td>
                        <td>${formatNumber(report.pbRatio)}</td>
                        <td class="${getROEClass(report.roe)}">${formatNumber(report.roe)}</td>
                        <td>${formatAmount(report.netAssets)}</td>
                        <td>${formatDateTime(report.updateTime)}</td>
                    </tr>
                `);
            });
            
            // 添加季度标签点击事件
            $('.quarter-chip').click(function() {
                $('.quarter-chip').removeClass('current');
                $(this).addClass('current');
                let date = $(this).data('date');
                // 可以在这里添加高亮对应行的逻辑
            });
        }
        
        // 渲染ROE趋势图
        function renderRoeTrendChart(reports) {
            if (reports.length === 0) return;
            
            // 按报告期升序排序
            reports.sort((a, b) => new Date(a.reportDate) - new Date(b.reportDate));
            
            let dates = reports.map(r => formatDate(r.reportDate));
            let roeValues = reports.map(r => r.roe || 0);
            
            let chart = echarts.init(document.getElementById('roeTrendChart'));
            let option = {
                title: {
                    text: 'ROE季度变化趋势',
                    left: 'center',
                    textStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function(params) {
                        let data = params[0];
                        return `${data.axisValue}<br/>ROE: ${data.value.toFixed(2)}%`;
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: dates,
                    axisLabel: {
                        rotate: 45,
                        interval: Math.floor(dates.length / 10) // 控制显示的标签数量
                    }
                },
                yAxis: {
                    type: 'value',
                    name: 'ROE(%)',
                    axisLabel: {
                        formatter: '{value}%'
                    }
                },
                series: [
                    {
                        name: 'ROE',
                        type: 'line',
                        data: roeValues,
                        smooth: true,
                        itemStyle: {
                            color: '#667eea'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0, y: 0, x2: 0, y2: 1,
                                colorStops: [
                                    {offset: 0, color: 'rgba(102, 126, 234, 0.3)'},
                                    {offset: 1, color: 'rgba(102, 126, 234, 0.1)'}
                                ]
                            }
                        },
                        markLine: {
                            silent: true,
                            data: [
                                {
                                    yAxis: 15,
                                    label: {
                                        formatter: '优秀(15%)',
                                        position: 'insideEndTop'
                                    },
                                    lineStyle: {
                                        color: '#38b2ac'
                                    }
                                },
                                {
                                    yAxis: 8,
                                    label: {
                                        formatter: '良好(8%)',
                                        position: 'insideEndBottom'
                                    },
                                    lineStyle: {
                                        color: '#ed8936'
                                    }
                                }
                            ]
                        }
                    }
                ]
            };
            chart.setOption(option);
        }
        
        // 渲染资产负债结构图
        function renderAssetLiabilityChart(totalAssets, totalLiabilities) {
            if (!totalAssets || !totalLiabilities) return;
            
            let netAssets = totalAssets - totalLiabilities;
            
            let chart = echarts.init(document.getElementById('assetLiabilityChart'));
            let option = {
                title: {
                    text: '资产负债结构',
                    left: 'center',
                    textStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '资产负债结构',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '18',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: totalLiabilities, name: '总负债'},
                            {value: netAssets, name: '净资产'}
                        ]
                    }
                ]
            };
            chart.setOption(option);
        }
        
        // 处理季度数据
        function processQuarterlyData(securityCode, securityName) {
            showLoading();
            $.ajax({
                url: `/stockpereport/process20Quarters?securityCode=${securityCode}&securityName=${encodeURIComponent(securityName)}`,
                type: 'GET',
                success: function(data) {
                    hideLoading();
                    if (data.success) {
                        showToast('成功', data.message, 'success');
                        // 重新加载数据
                        loadStockDetail(securityCode);
                        loadQuarterlyData(securityCode);
                    } else {
                        showToast('失败', data.message, 'danger');
                    }
                },
                error: function() {
                    hideLoading();
                    showToast('错误', '网络请求失败，请稍后重试', 'danger');
                }
            });
        }
        
        // 设置进度条
        function setProgressValue(elementId, value, hint) {
            let progress = $('#' + elementId);
            progress.css('width', value + '%');
            progress.attr('aria-valuenow', value);
            progress.next().text(hint);
        }
        
        // 获取PE进度值
        function getPEProgress(pe) {
            if (pe < 10) return 100;
            if (pe < 20) return 80;
            if (pe < 30) return 60;
            if (pe < 50) return 40;
            return 20;
        }
        
        // 获取PE提示
        function getPEHint(pe) {
            if (pe < 10) return '估值较低';
            if (pe < 20) return '估值合理';
            if (pe < 30) return '估值略高';
            if (pe < 50) return '估值较高';
            return '估值过高';
        }
        
        // 获取PB进度值
        function getPBProgress(pb) {
            if (pb < 1) return 100;
            if (pb < 2) return 80;
            if (pb < 3) return 60;
            if (pb < 5) return 40;
            return 20;
        }
        
        // 获取PB提示
        function getPBHint(pb) {
            if (pb < 1) return '破净';
            if (pb < 2) return '估值合理';
            if (pb < 3) return '估值略高';
            if (pb < 5) return '估值较高';
            return '估值过高';
        }
        
        // 获取ROE进度值
        function getROEProgress(roe) {
            if (roe > 20) return 100;
            if (roe > 15) return 80;
            if (roe > 10) return 60;
            if (roe > 5) return 40;
            return 20;
        }
        
        // 获取ROE提示
        function getROEHint(roe) {
            if (roe > 20) return '非常优秀';
            if (roe > 15) return '优秀';
            if (roe > 10) return '良好';
            if (roe > 5) return '一般';
            return '较差';
        }
        
        // 计算资产负债率
        function calculateDebtRatio(totalAssets, totalLiabilities) {
            if (!totalAssets || totalAssets === 0) return '--';
            return ((totalLiabilities / totalAssets) * 100).toFixed(2);
        }
        
        // 格式化数字
        function formatNumber(num) {
            if (num === null || num === undefined) return '--';
            return num.toFixed(2);
        }
        
        // 格式化金额（万元）
        function formatAmount(amount) {
            if (amount === null || amount === undefined) return '--';
            if (amount >= 100000000) {
                return (amount / 100000000).toFixed(2) + '亿元';
            } else if (amount >= 10000) {
                return (amount / 10000).toFixed(2) + '万元';
            }
            return amount.toFixed(2);
        }
        
        // 格式化日期
        function formatDate(dateString) {
            if (!dateString) return '--';
            let date = new Date(dateString);
            return date.toLocaleDateString('zh-CN');
        }
        
        // 格式化日期时间
        function formatDateTime(dateString) {
            if (!dateString) return '--';
            let date = new Date(dateString);
            return date.toLocaleString('zh-CN');
        }
        
        // 获取PE样式类
        function getPEClass(pe) {
            if (!pe) return '';
            if (pe < 15) return 'text-success';
            if (pe < 30) return 'text-warning';
            return 'text-danger';
        }
        
        // 获取ROE样式类
        function getROEClass(roe) {
            if (!roe) return '';
            if (roe > 15) return 'text-success';
            if (roe > 8) return 'text-warning';
            return 'text-danger';
        }
        
        // 显示加载遮罩
        function showLoading() {
            $('#loadingOverlay').show();
        }
        
        // 隐藏加载遮罩
        function hideLoading() {
            $('#loadingOverlay').hide();
        }
        
        // 显示错误消息
        function showError(message) {
            $('#errorMessage').text(message);
            $('#errorArea').show();
        }
        
        // 显示提示消息
        function showToast(title, message, type) {
            $('#toastTitle').text(title);
            $('#toastMessage').text(message);
            
            let toast = $('#toast');
            toast.removeClass('bg-success bg-danger bg-info bg-warning');
            toast.addClass(`bg-${type}`);
            toast.addClass('text-white');
            
            toast.toast('show');
        }
        
        // 窗口大小改变时重新渲染图表
        $(window).resize(function() {
            echarts.getInstanceByDom(document.getElementById('roeTrendChart'))?.resize();
            echarts.getInstanceByDom(document.getElementById('assetLiabilityChart'))?.resize();
        });
    </script>
</body>
</html>